<template>
    <div>
        <el-dialog center class="global-dialog" v-model="dialogVisable" width="1050px" top="10vh" :show-close="true"
            :close-on-click-modal="false" @close="close" destroy-on-close>
            <template #title>
                <div class="my-header" v-loading="detail_loading">
                    <el-tabs v-model="tabId" class="demo-tabs">
                        <el-tab-pane label="基本信息" name="1">
                            <el-form :model="diaForm" ref="ruleFormRef" :rules="rules" status-icon label-width="110px"
                                status>
                                <el-row :gutter="15">
                                    <el-col :span="8">
                                        <el-form-item label="奖项名称" prop="awardName">
                                            <el-input placeholder="请输入" v-model="diaForm.awardName" style="width: 100%"
                                                clearable  maxlength="50" show-word-limit />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="申报单位" prop="applyUnitId">

                                            <popup-tree-input :data="orgAllList" :props="popupTreeProps" :prop="deptForm.parentName == null
                                                ? $t('message.org.top_menu')
                                                : diaForm.applyUnit
                                                " :node-key="'' + deptForm.parentId"
                                                :current-change-handle="changeUnit" />

                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="8">
                                        <el-form-item label="申报状态" prop="applyStatusId">
                                            <el-select v-model="diaForm.applyStatusId" placeholder="请选择" clearable
                                                @change="changeApply" style="width: 100%">
                                                <el-option :label="item.itemText" :value="item.itemValue"
                                                    :key="item.itemValue" v-for="item in applyStateList" />
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>

                                <!-- 项目牵头 -->
                                <el-row :gutter="15">
                                    <el-col :span="24">
                                        <el-form-item label="项目牵头单位" style="width: 100%" prop="projectHeadUnitIds">
                                            <div class="selectLabel">
                                                <div>
                                                    <el-tag v-for="tag in unit" :key="tag" class="mx-1" closable
                                                        @close="handleClose(tag)">
                                                        {{ tag.value }}
                                                    </el-tag>
                                                </div>
                                            </div>
                                            <span class="addLabel" @click="addUnitBox">添加单位</span>
                                        </el-form-item>
                                    </el-col>
                                </el-row>

                                <!-- 项目参研 -->
                                <el-row :gutter="15">
                                    <el-col :span="24">
                                        <el-form-item label="项目参研单位" style="width: 100%" prop="projectParticipateUnitIds">
                                            <div class="selectLabel">
                                                <div>
                                                    <el-tag v-for="tag in unit1" :key="tag" class="mx-1" closable
                                                        @close="handleClose1(tag)">
                                                        {{ tag.value }}
                                                    </el-tag>
                                                </div>
                                            </div>
                                            <span class="addLabel" @click="addUnitBox1">添加单位</span>
                                        </el-form-item>
                                    </el-col>
                                </el-row>

                                <el-row :gutter="15">
                                    <el-col :span="8">
                                        <el-form-item label="项目负责人" prop="changeName">
                                            <el-input placeholder="请输入" v-model="diaForm.changeName" style="width: 100%"
                                                clearable  maxlength="20" show-word-limit />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">

                                        <el-form-item label="项目开始时间" prop="startTime">
                                            <el-date-picker v-model="diaForm.startTime" type="date"
                                                value-format="YYYY-MM-DD" placeholder="请选择" clearable style="width: 100%" />
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="8">
                                        <el-form-item label="项目结束时间" prop="endTime">
                                            <el-date-picker type="date" placeholder="选择日期" v-model="diaForm.endTime"
                                                value-format="YYYY-MM-DD" style="width: 100%" clearable></el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                </el-row>

                                <el-row :gutter="15">
                                    <el-col :span="8">
                                        <el-form-item label="获奖级别" prop="awardLevelId">
                                            <el-select v-model="diaForm.awardLevelId" placeholder="请选择" style="width: 100%"
                                                clearable @change="changeLevel">
                                                <el-option :label="item.itemText" :value="item.itemValue"
                                                    :key="item.itemValue" v-for="item in awardLevelList" />
                                            </el-select>
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="8">
                                        <el-form-item label="获奖类别" prop="awardClassId">
                                            <el-select @change="changeClass" v-model="diaForm.awardClassId"
                                                placeholder="请选择" style="width: 100%" clearable>
                                                <el-option :label="item.itemText" :value="item.itemValue"
                                                    :key="item.itemValue" v-for="item in awardCategoryList" />
                                            </el-select>
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="8">
                                        <el-form-item label="获奖等级" prop="awardGradeId">
                                            <el-select v-model="diaForm.awardGradeId" placeholder="请选择" style="width: 100%"
                                                clearable @change="changeGrade">
                                                <el-option :label="item.itemText" :value="item.itemValue"
                                                    :key="item.itemValue" v-for="item in awardGradeyList" />
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>

                                <el-row :gutter="15">
                                    <el-col :span="8">
                                        <el-form-item label="颁发单位" prop="rdUnit">
                                            <el-input placeholder="请输入" v-model="diaForm.rdUnit" style="width: 100%"
                                                clearable maxlength="20" show-word-limit  />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="获奖时间" prop="awardDate">
                                            <el-date-picker type="date" clearable placeholder="选择日期"
                                                v-model="diaForm.awardDate" value-format="YYYY-MM-DD"
                                                style="width: 100%"></el-date-picker>
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="8">
                                        <el-form-item label="中咨集团排名" prop="rankNo">
                                            <el-input oninput="value=value.replace(/^0|[^0-9]/g,'')" type="number"
                                                placeholder="请输入" clearable v-model="diaForm.rankNo" style="width: 100%" maxlength="3"   />
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="成果" name="2">
                            <Result :members="details" :membersFlag="resultFlag" @paramsChange="resultChange"></Result>
                        </el-tab-pane>
                        <el-tab-pane label="相关附件" name="3">
                            <PlatformFiles :files="files" @filesParams="filesParams" download="KJSL:KJCG:KJJX:DOWNLOAD"  upload="KJSL:KJCG:KJJX:UPLOAD" fileDelete="KJSL:KJCG:KJJX:FILEDELET"></PlatformFiles>
                        </el-tab-pane>
                        <el-tab-pane label="变更记录" name="4" v-if="id">
                            <Record :changeLogs="changeLogs"></Record>
                        </el-tab-pane>
                    </el-tabs>

                    <!--单位选择 1-->
                    <el-dialog v-model="unitVisable1" append-to-body width="60%" top="10vh" :show-close="false"
                        :close-on-click-modal="false">
                        <template #title>
                            <el-tabs v-model="activeName" class="demo-tabs">
                                <el-tab-pane label="选择单位" name="first">
                                    <div>
                                        <el-row>
                                            <el-col :span="24">
                                                <p>内部单位：</p>
                                                <el-cascader-panel :options="orgAllList" v-model="innerValue1"
                                                    :props="{checkStrictly: true, emitPath: false, value: 'id', label: 'name' }"
                                                    :show-all-levels="false" @change="innerValueChange1" />
                                            </el-col>
                                            <el-col :span="24" style="margin-top: 15px">
                                                <span>外部单位：</span>
                                                <el-input v-model="outsideValue1" style="width: 200px; margin-right: 15px"
                                                    clearable />
                                                <el-button type="primary" @click="addOutside1()">添加</el-button>
                                            </el-col>
                                        </el-row>
                                        <div class="unitBox">
                                            <div class="title">已选单位</div>
                                            <div class="tagBox">
                                                <el-tag v-for="tag in unit1" :key="tag" class="mx-1"
                                                    @close="handleClose1(tag)" closable>
                                                    {{ tag.value }}
                                                </el-tag>
                                            </div>
                                        </div>
                                    </div>
                                </el-tab-pane>
                            </el-tabs>
                        </template>
                        <template #footer>
                            <span class="dialog-footer">
                                <el-button @click="unitVisable1 = false">关闭</el-button>
                                <el-button type="primary" @click="saveHeadUnit1()">保存</el-button>
                            </span>
                        </template>
                    </el-dialog>

                    <!--单位选择 -->
                    <el-dialog v-model="unitVisable" append-to-body width="60%" top="10vh" :show-close="false"
                        :close-on-click-modal="false">
                        <template #title>
                            <el-tabs v-model="activeName" class="demo-tabs">
                                <el-tab-pane label="选择单位" name="first">
                                    <div>
                                        <el-row>
                                            <el-col :span="24">
                                                <p>内部单位：</p>
                                                <el-cascader-panel :options="orgAllList" v-model="innerValue"
                                                    :props="{checkStrictly: true, emitPath: false, value: 'id', label: 'name' }"
                                                    :show-all-levels="false" @change="innerValueChange" />
                                            </el-col>
                                            <el-col :span="24" style="margin-top: 15px">
                                                <span>外部单位：</span>
                                                <el-input v-model="outsideValue" style="width: 200px; margin-right: 15px"
                                                    clearable />
                                                <el-button type="primary" @click="addOutside()">添加</el-button>
                                            </el-col>
                                        </el-row>
                                        <div class="unitBox">
                                            <div class="title">已选单位</div>
                                            <div class="tagBox">
                                                <el-tag v-for="tag in unit" :key="tag" class="mx-1"
                                                    @close="handleClose(tag)" closable>
                                                    {{ tag.value }}
                                                </el-tag>
                                            </div>
                                        </div>
                                    </div>
                                </el-tab-pane>
                            </el-tabs>
                        </template>
                        <template #footer>
                            <span class="dialog-footer">
                                <el-button @click="unitVisable = false">关闭</el-button>
                                <el-button type="primary" @click="saveHeadUnit()">保存</el-button>
                            </span>
                        </template>
                    </el-dialog>
                </div>
            </template>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="close">关闭</el-button>
                    <el-button type="primary" @click="save">保存</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import * as proxy from "@/constants/proxy";
import request from "@/utils/request";
import {
addForm,
editForm,
getDetailById,
getDictionary
} from "@/views/science/api/technologyawards";
import PopupTreeInput from '@/views/science/components/PopupTreeInput/index.vue';
import PlatformFiles from "@/views/science/components/platformFiles/platformFiles.vue";
import Record from "@/views/science/components/record/record.vue";
import SelectOption from "@/views/science/components/selectOption/index.vue";
import { tips } from "@/views/science/components/tips/tips";
import { computed, nextTick, onMounted, reactive, ref, toRefs, watch } from "vue";
import { useStore } from "vuex";
import Result from "./result.vue";

export default {
    components: {
        PlatformFiles,
        Record,
        SelectOption,
        Result,
        PopupTreeInput
    },
    props: {
        dialogVisable: {
            type: Boolean,
            default: false,
        },

        // falg  1:新增  2:编辑  3:详情
        flag: {
            type: String,
            default: 1,
        },
        id: {
            type: String,
            default: "",
        },
    },
    setup(props, { emit }) {
        watch(
            () => props.id,

            () => {
                // 深度监听.只有在id存在的时候调用详情的接口
                if (props.id && props.flag === 2) {
                    getDetail(props.id);
                }
            },

            { deep: true, immediate: true }
        );
        // 发送请求
        onMounted(() => {
            // 获取数据字典

            getCodeList();

            getUnitList();
        });

        let store = useStore();

        const ruleFormRef = ref();


        const DiaForm = ref();
        const deptForm = {
            parentId: 0,
            parentName: '',
        }
        let data = reactive({
            popupTreeProps: {
                label: 'name',
                children: 'children',
            },
            // 牵头项目
            unit: [],
            unit1: [],
            detail_loading:false,
            tabId: "1",
            activeName: "first",
            innerValue1: '',
            innerValue: "",
            outsideValue: "",
            outsideValue1: '',

            unitVisable: false,
            unitVisable1: false,

            orgAllList: [],
            applyStateList: [], //申报状态
            awardLevelList: [], // 获奖级别
            awardCategoryList: [], // 获奖类别
            awardGradeyList: [], // 获奖等级

            resultFlag: false,

            diaForm: {
                id: "",

                awardName: "", //奖项名称

                applyUnitId: "", //申报单位id
                applyUnit: "", //申报单位name

                applyStatusId: "", //申报状态id
                applyStatus: "", //申报name

                projectHeadUnitIds: "", //项目牵头ids
                projectHeadUnits: "", //项目牵头名称

                projectParticipateUnitIds: '',
                projectParticipateUnits: '',
                changeName: "", //项目负责人
                startTime: "", //开始时间
                endTime: "", //结束时间

                awardLevel: "", //获奖级别
                awardLevelId: "", //获奖级id

                awardClass: "", //获奖类别
                awardClassId: "", //获奖类别id

                awardGrade: "", //获奖等级
                awardGradeId: "", //获奖等级id

                rdUnit: "", //颁发单位
                awardDate: "", //颁发时间
                rankNo: "", //中咨集团排名
            },

            details: [],

            files: [],

            changeLogs: [],
        });
        const pickerOptionsStart = (rule, value, callback) => {
            if (value) {
                if (new Date(data.diaForm.startTime).getTime() > new Date(data.diaForm.endTime).getTime()) {
                    return callback(new Error("开始时间不能大于结束时间"))
                } else {
                    return callback()
                }
            } else {
                return callback(new Error("开始时间不能为空"));
            }
        }
        const pickerOptionsEnd = (rule, value, callback) => {
            if (value) {
                if (new Date(data.diaForm.startTime).getTime() > new Date(data.diaForm.endTime).getTime()) {
                    return callback(new Error("结束时间不能小于开始时间"))
                } else {
                    return callback()
                }
            } else {
                return callback(new Error("结束时间不能为空"));
            }
        }

        // 规则校验
        let rules = reactive({
            awardName: [{ required: true, message: "请输入奖项名称", trigger: "blur" }],
            applyUnitId: [{ required: true, message: "请选择申报单位", trigger: "change" }],
            applyStatusId: [{ required: true, message: "请选择申报状态", trigger: "change" }],
            projectHeadUnitIds: [
                { required: true, message: "项目牵头单位", trigger: "change" },
            ],
            projectParticipateUnitIds: [
                { required: true, message: "项目参研单位", trigger: "change" },
            ],
            changeName: [{ required: true, message: "项目负责人", trigger: "change" }],
            startTime: [{ required: true, validator: pickerOptionsStart, trigger: "change" }],
            endTime: [{ required: true, validator: pickerOptionsEnd, trigger: "change" }],
            awardLevelId: [{ required: true, message: "获奖级别", trigger: "change" }],
            awardClassId: [{ required: true, message: "获奖类别", trigger: "change" }],
            awardGradeId: [{ required: true, message: "获奖等级", trigger: "change" }],
            rdUnit: [{ required: true, message: "颁发单位", trigger: "change" }],
            awardDate: [{ required: true, message: "获奖时间", trigger: "change" }],
            rankNo: [{ required: true, message: "请输入中咨集团排名", trigger: "change" }],
        });

        let getUnitList = () => {

            return request({
                url: proxy.CHECC_API_CMS + "/org/getSysOrgList",
                method: "get",
            }).then(res => {
                data.orgAllList = res.data.data
            })
        };

        // ---------change (方法)-------start------------
        let handleClose = (tag) => {

            data.unit.splice(data.unit.indexOf(tag), 1);

            let ids = data.unit.map((item) => item.id);
            let names = data.unit.map((item) => item.value);

            let filterArr = ids.filter(function (i) {
                return i && i.trim();
            });
            data.diaForm.projectHeadUnitIds = filterArr.join(",");
            data.diaForm.projectHeadUnits = names.join(",");
        };

        let handleClose1 = (tag) => {
            data.unit1.splice(data.unit.indexOf(tag), 1);

            let ids = data.unit1.map((item) => item.id);

            let names = data.unit1.map((item) => item.value);

            let filterArr = ids.filter(function (i) {
                return i && i.trim();
            });

            data.diaForm.projectParticipateUnitIds = filterArr.join(",");

            data.diaForm.projectParticipateUnits = names.join(",");

        };

        let saveHeadUnit = () => {
            let ids = data.unit.map((item) => item.id);
            let names = data.unit.map((item) => item.value);

            let filterArr = ids.filter(function (i) {
                return i && i.trim();
            });
            data.diaForm.projectHeadUnitIds = filterArr.join(",");
            data.diaForm.projectHeadUnits = names.join(",");
            data.unitVisable = false;
        };

        let saveHeadUnit1 = () => {
            let ids = data.unit1.map((item) => item.id);
            let names = data.unit1.map((item) => item.value);
            let filterArr = ids.filter(function (i) {
                return i && i.trim();
            });
            data.diaForm.projectParticipateUnitIds = filterArr.join(",");
            data.diaForm.projectParticipateUnits = names.join(",");

            data.unitVisable1 = false;
        };

        let filterKeywords = (arr) => {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] == "" || arr[i] == null || typeof arr[i] == undefined) {
                    arr.splice(i, 1);
                    i = i - 1;
                }
                return arr;
            }
        };

        let addOutside = () => {
            if (data.outsideValue) {
                data.unit.push({
                    id: data.outsideValue,
                    value: data.outsideValue,
                });
            }
            data.outsideValue = "";
        };

        let addOutside1 = () => {
            if (data.outsideValue1) {
                data.unit1.push({
                    id: data.outsideValue1,
                    value: data.outsideValue1,
                });
            }
            data.outsideValue1 = "";
        };
        let handleUnitString = (data, item) => {
            if (data) {
                let arr = data.split(",");
                var index = arr.indexOf(item);
                if (!(index > -1)) {
                    // 代表不存在，
                    arr.push(item);
                } else {
                    arr.splice(index, 1);
                }
                return arr.join(",");
            } else {
                let arr = [];
                arr.push(item);
                return arr.join(",");
            }
        };

        // 申报单位
        let changeUnit = (item) => {

            data.diaForm.applyUnitId = item.id;

            data.diaForm.applyUnit = item.name;
        };

        let innerValueChange = (value) => {
            const item = findItemNested(data.orgAllList, value, "children");
            data.unit.push({
                id: item.id,
                value: item.name,
            });
        };

        let innerValueChange1 = (value) => {

            const item = findItemNested(data.orgAllList, value, "children");
            data.unit1.push({
                id: item.id,
                value: item.name,
            });
        }
        let findItemNested = (arr, itemId, nestingKey) =>
            arr.reduce((a, item) => {
                if (a) return a;
                if (item.id === itemId) return item;
                if (item[nestingKey]) return findItemNested(item[nestingKey], itemId, nestingKey);
            }, null);

        // 修改状态

        let changeApply = (id) => {
            let itemText = data.applyStateList.find((item) => item.itemValue == id).itemText;

            data.diaForm.applyStatus = itemText;
        };

        let changeLevel = (id) => {
            let itemText = data.awardLevelList.find((item) => item.itemValue == id).itemText;
            data.diaForm.awardLevel = itemText;

            data.awardCategoryList = data.awardLevelList.find((item) => item.itemValue == id).children;
            data.diaForm.awardClass = ''
            data.diaForm.awardClassId = ''
            data.diaForm.awardGrade = ''
            data.diaForm.awardGradeId = ''
        };

        let changeClass = (id) => {
            let itemText = data.awardCategoryList.find((item) => item.itemValue == id).itemText;

            data.diaForm.awardClass = itemText;
            data.awardGradeyList = data.awardCategoryList.find((item) => item.itemValue == id).children;

            data.diaForm.awardGrade = ''
            data.diaForm.awardGradeId = ''
        };

        let changeGrade = (id) => {
            let itemText = data.awardGradeyList.find((item) => item.itemValue == id).itemText;

            data.diaForm.awardGrade = itemText;
        };

        let resultChange = (parms) => {
            data.resultFlag = false;

            data.details = parms;
        };

        // ---------change (方法)-------end------------
        watch(
            () => props.dialogVisable,
            (newval) => {
                if (newval) {
                    nextTick(() => {
                        //初始绑定需在form完成初始化
                        ruleFormRef.value?.resetFields()
                    })
                }
            }
        )
        // 保存
        const save = async () => {
            let validd = true
            await ruleFormRef.value.validate((valid) => {
                validd = valid
                console.log('校验', valid);
            });
            console.log('校验后', validd, ruleFormRef.value);

            // 校验通过
            if (validd) {
                //flag 1 新增  2 编辑  3  详情
                if (props.flag == 1) {
                    delete data.diaForm.id;
                    delete data.details.id;

                    addForm({
                        info: data.diaForm,
                        details: data.details,
                        files: data.files,
                    }).then(() => {
                        tips("新增成功", "success");
                        emit("changeDialog", "1");

                        DiaForm.value.resetFields();

                    });
                } else {
                    editForm({
                        info: data.diaForm,
                        details: data.details,
                        files: data.files,
                    }).then(() => {
                        tips("编辑成功", "success");
                        emit("changeDialog", "1");

                        DiaForm.value.resetFields();

                    });
                }
            } else {
                return tips("请将基本信息补充完整", "warning");
            }

        };

        let filesParams = (params) => {
            data.files = params;
        };

        let addUnitBox1 = () => {
            data.unitVisable1 = true;
        };

        // 添加打开单位框

        let addUnitBox = () => {
            data.unitVisable = true;
        };

        let selOp = computed(() => {
            const obj = store.state.technologyStrength.orgAllList;

            let arr = [];
            for (let key in obj) {
                arr.push(obj[key]);
            }
            return arr;
        });


        // 通过详情查询id
        let getDetail = async (id) => {
            // data.detail_loading = true
            let res = await getDetailById({ id });

            data.diaForm = res.data.data.info;

            data.files = res.data.data.files;

            data.details = res.data.data.details;

            data.awardCategoryList = data.awardLevelList.find((item) => item.itemValue == data.diaForm.awardLevelId).children;

            data.awardGradeyList = data.awardCategoryList.find((item) => item.itemValue == data.diaForm.awardClassId).children;

            // 回显值 projectHeadUnits (名字)   projectHeadUnitIds(id)
            if (res.data.data.info.projectHeadUnits) {

                let arr1 = res.data.data.info.projectHeadUnits.split(",");
                let arr2 = res.data.data.info.projectHeadUnitIds.split(",");

                let dataObj = {};

                arr2.map((item, index) => {

                    dataObj[item] = arr1[index]
                })


                let newArr = objToArr(dataObj)

                data.unit = newArr

            }

            if (res.data.data.info.projectParticipateUnitIds) {

                let arr1 = res.data.data.info.projectParticipateUnits.split(",");
                let arr2 = res.data.data.info.projectParticipateUnitIds.split(",");

                let dataObj1 = {};

                arr2.map((item, index) => {

                    dataObj1[item] = arr1[index]
                })


                let newArr = objToArr(dataObj1)

                data.unit1 = newArr

            }

            data.resultFlag = true;

            data.changeLogs = res.data.data.changeLogs;
            data.detail_loading = false
        };

        let objToArr = (dataObj) => {
            let arr = []
            for (let key in dataObj) {
                arr.push({
                    value: dataObj[key],
                    id: key
                })
            }
            return arr
        }

        // 数据字典

        let getCodeList = () => {
            getDictionary([
                "KJSL_DECLARATION_TYPE",
                "KHGL_KJSL_HJJB",
                "KJSL_AWARD_CATEGORY",
                "KJSL_AWARD_LEVEL",
                "KHGL_KJSL_APPLY_STATUS",
            ]).then((res) => {
                // data.applyStateList = res.data.data.KJSL_DECLARATION_TYPE;
                data.applyStateList = res.data.data.KHGL_KJSL_APPLY_STATUS;

                data.awardLevelList = res.data.data.KHGL_KJSL_HJJB;

                // data.awardCategoryList = res.data.data.KJSL_AWARD_CATEGORY;

                // data.awardGradeyList = res.data.data.KJSL_AWARD_LEVEL;
            });
        };

        // 关闭清除对话框里面的数据,附件.变更记录也要删除

        let close = () => {
            emit("changeDialog");
        };

        return {
            ruleFormRef,
            deptForm,
            objToArr,
            saveHeadUnit,
            addOutside1,
            handleClose,
            handleUnitString,
            addOutside,
            resultChange,
            filesParams,
            changeUnit,
            changeApply,
            changeLevel,
            changeClass,
            changeGrade,
            filterKeywords,
            rules,
            handleClose1,
            findItemNested,
            innerValueChange,
            innerValueChange1,
            addUnitBox,
            addUnitBox1,
            selOp,
            store,
            saveHeadUnit1,
            getCodeList,
            ...toRefs(data),
            close,
            save,
        };
    },
};
</script>

<style scoped lang="scss">
.dialog-footer {
    display: flex;
    justify-content: end;
}

:deep(.el-dialog__body) {
    display: none;
}

// 滚动条
:deep(.demo-tabs > .el-tabs__content) {
    max-height: 500px;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.selectLabel {
    width: 70%;
    min-height: 40px;
    line-height: 40px;
    padding: 0 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
}

.el-tag {
    margin-right: 10px;
}

.unitBox {
    width: 100%;
    margin: 30px 0;

    .title {
        padding: 15px 0;
        border-bottom: 1px solid #ccc;
    }

    .tagBox {
        line-height: 40px;
        margin-top: 15px;
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 10px 15px;
    }
}

.addLabel {
    display: inline-block;
    width: 120px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #169bd5;
    border-radius: 6px;
    color: #fff;
    margin-left: 15px;
    vertical-align: top;
    margin-top: 5px;
    cursor: pointer;
}
</style>
